<template>
	<!-- 面粉  -->
	<view class="flour">
		<!-- 头部导航栏 -->
		<tabbar ref="myTab" @tabsChange="tabsChange" :pageName="pageName" :list="list" :current="current"
			:menuButtonInfo="menuButtonInfo"></tabbar>

		<swiper v-if="isnetworkType" class="swiperBox"
			:style="{height:'calc(100vh - ' + (2*menuButtonInfo.top+198)+ 'rpx)',top: (2*menuButtonInfo.top+198) +'rpx'}"
			:current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">

			<!-- 面粉 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="width: 100%; height: 100%;" @scrolltolower="onreachBottom">

					<loading v-if="!isFlourEmpty01" :toast="loadStatux" :title="'暂无面粉'"></loading>
					<view v-else-if="userObjs && labelLists && flowLists">
						<!-- 名片 -->
						<view class="marginA">
							<callingcard @ff_isPopup=ffIsPopup :isPath="false" :userObj="userObjs"></callingcard>
						</view>

						<!-- 标签栏 -->
						<view class="labelBox">
							<mylabel :labelData="labelLists"></mylabel>
						</view>

						<!--Ta的动态 -->
						<view class="privilege label marginA" v-if="isArise">
							<view class="privilege_label"></view>
							<view class="privilege_title">Ta的动态</view>
							<view class="privilege_image_">
								<image src="https://z3.ax1x.com/2021/08/27/hQDCz4.png"></image>
							</view>
						</view>
						<view v-if="isArise" class="falls">
							<fallsshop @updataShow="updataShow" @addRandomDatas="addRandomData" :loadStatus="loadStatux"
								:isUserId="userObjs.userId" :flowList="flowLists"></fallsshop>
						</view>

					</view>
				</scroll-view>
			</swiper-item>
<!-- add-time -->
			<!-- 广场 -->
			<swiper-item class="swiper-item" v-if="isArise">
				<scroll-view scroll-y style="width: 100%; height: 100%;" @scrolltolower="onreachBottom">

					<view class="falls">
						<falls ref="myfalls" @updataShow="updataShow" @addRandomDatas="addRandomData"
							:swiperCurrent="swiperCurrent" :loadStatus="loadStatux" :flowList="squareLists"></falls>
					</view>


				</scroll-view>
			</swiper-item>
		</swiper>
		<network v-else @fallsRefresh="fallsRefresh"></network>

		<!-- 关注与下一个按钮 -->
		<view class="pduan" v-if="(swiperCurrent == 0 && isnetworkType && isFlourEmpty01)">
			<view class="pduanBox Box_left" @click="next(false)">
				<view class="boxs">
					<u-icon name="close" class="iconStyle" color="#F10200" size="50"></u-icon>
					<view>换一个</view>
				</view>
			</view>
			<view class="pduanBox Box_Right" @click="userFollow">
				<view class="boxs">
					<u-icon name="checkmark" class="iconStyle" color="#000" size="60"></u-icon>
					<view>关注</view>
				</view>
			</view>
		</view>



		<!-- 添加动态 -->
		<view class="dynamic" v-if="swiperCurrent == 1" @click="goPageS">
			<image src="https://z3.ax1x.com/2021/08/31/hd9G6O.png"></image>
		</view>


		<!-- 相互关注 -->
		<u-popup v-model="isPuper" mode="center" border-radius="12">
			<view class="puperBox">
				<image class="puperBoxImg" src="https://z3.ax1x.com/2021/09/02/hrR3PH.png"></image>
				<view class="puperBoxTitle">相互关注</view>
				<view class="puperBoxText">一定是有种特殊吸引力</view>
				<view class="puperBoxButs" @click="isPuper = false">
					知道了
				</view>
			</view>
		</u-popup>


		<perfectbox :img="imgs" pagepath="../my/setting/setting?login=1" :inviteCode="inviteCodex" :show="isShow"
			@ff_show="ffIshows">
		</perfectbox>

		<u-popup v-model="isPopup" mode="center" border-radius="14">
			<view class="popBox">
				<image @click.stop="ffChacha" class="popCha" src="../../static/chacha.png" mode="widthFix"></image>
				<view class="conBox">
					<image :class="'conBoxImg'+ ((popObj.num == 0) ? ' dot' : '')" :src="popObj.url" mode="widthFix">
					</image>
					<view class="conBoxTitle">{{popObj.title}}者</view>
					<text class="conBoxText">{{popObj.text}}</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import loading from '@/components/loading/loading.vue'
	import callingcard from "../../components/callingcard/callingcard.vue"
	import fallsshop from "../../components/falls/fallsshop.vue"
	import falls from "../../components/falls/falls.vue";
	import perfectbox from "../../components/perfectbox/perfectbox.vue"
	import tabbar from '@/components/tabbar/tabbar.vue'
	import empty from "../../components/defaultpage/empty.vue"
	import network from "../../components/defaultpage/network.vue"
	export default {
		data() {
			return {
				// activeStyleBut:,
				// activeStyleBar:,
				isCircle: true,
				// 0：出现邀请码的完善信息  1：出现普通的完善信息 2：隐藏
				isShow: 2,
				isPuper: false,
				userObjs: {},
				list: [{
					name: '面粉'
				}, {
					name: '广场'
				}, ],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				loadStatux: 'Loading',
				flowLists: [],
				lists: [],
				menuButtonInfo: {
					top: 25
				},
				squareLists: [],
				pageNum: 1,
				fansNum: 1,
				dynamicNum: 1,
				pageSize: 8,
				isTrue: true,
				isnetworkType: true,
				isClear: 0,
				labelLists: [],
				isDynamic: false,
				pageName: '面粉',
				isFlourEmpty01: false,
				imgs: "",
				isPopup: false,
				popObj: {
					url: "https://oss-images.lclook.com/upload/2021/09/23/1632382096258.png",
					title: "",
					text: ""
				},
				newStatus: ''
			}
		},
		onLoad() {



			if (!this.isArise) {
				this.list = [{
					name: '面粉'
				}]
			}

			this.init()


		},
		// 来自页面内分享
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: 'chimian',
				path: '/pages/flour/flour'
			}
		},

		computed: {
			flourUser() {
				return this.$store.state.flourUser;
			},
			isArise() {
				return this.$store.state.isArise;
			},
			Version() {
				return this.$store.state.Version;
			}
		},
		onShow() {
			// debugger
			uni.onNetworkStatusChange(function(res) {
				if (res.networkType == 'none') {
					this.isnetworkType = false
				} else {
					this.isnetworkType = true
				}

			});


			this.initFans();


			this.initOnShow();
			if (this.pageNum == 1) {
				this.addRandomData();
			}


		},
		components: {
			callingcard,
			falls,
			fallsshop,
			perfectbox,
			tabbar,
			empty,
			network,
			loading
		},
		watch: {
			swiperCurrent(newer, older) {
				if (newer != older) {
					if (newer == 1) {
						this.isTrue = true;
			
						this.addRandomData();
					

					} else {
			
						this.initFansDynamic();
					}

				}
			},
			pageNum(newer, older) {
				if (newer == 1) {
					this.isCircle = true;
				} else {
					this.isCircle = false;
				}

			},
			loadStatux(newVal, oldVal) {
				console.log("loadStatus=====>",newVal)
			},

		},
		methods: {
			// 数组去重
			//  方法2：利用reduce方法遍历数组,reduce第一个参数是遍历需要执行的函数，第二个参数是item的初始值
			deWeight(arr) {
				var obj = {};
				let newArr = arr.reduce(function(item, next) {
					obj[next.idx] ? '' : obj[next.idx] = true && item.push(next);
					return item;
				}, []);
				return newArr;
			},
			// 刷新一下
			fallsRefresh() {
				this.initFans();
				this.initOnShow();
				this.initFansDynamic();
			},
			ffIshows() {
				this.isShow = 2;
			},
			updataShow(data) {
				this.isShow = data;
			},
			initOnShow() {
				// uni.getStorage({
				//     key: 'userPhone',
				//     success: res => {
				// 		this.show = false
				// 	},
				// 	fail: err => {
				// 		this.show = true
				// 	}
				// });
				return new Promise((ress, rejj) => {

					this.isShow = 2;
					this.$apis.accountInfo().then(res => {
						if (res.code == 200) {
							this.userPhoneApi = res.data.phone;
							this.imgs = res.data.awardPrivilegeBg;
							if (res.data.version == this.Version) {
								this.$store.commit('updataArise', true);
								this.list = [{
									name: '面粉'
								}, {
									name: '广场'
								}, ]
							} else {
								this.$store.commit('updataArise', false);
								this.list = [{
									name: '面粉'
								}]
							}
							// debugger
							if (res.data.needInviteCode) {

								if (res.data.inviteCode) {
									this.inviteCodex = res.data.inviteCode.code;
									if (!res.data.isMember) {
										// debugger
										this.isShow = 0
										ress();
									} else {
										// debugger
										this.isShow = 2
										ress();
									}
								}
							} else {
								if (!res.data.isMember) {
									// debugger
									this.isShow = 1
									ress();
								} else {
									// debugger
									this.isShow = 2
									ress();
								}
							}
						}



						console.log("个人信息成功", res)
					}).catch(err => {
						this.isShow = 0
						ress();
						console.log("个人信息错误", err)
					})
				})

			},

			init() {
				// #ifndef H5 || APP-PLUS || MP-ALIPAY
				this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// #endif
			},
			initFans(gz = true) {

				if (this.flourUser && gz) {
					this.userObjs = this.flourUser;
					
					this.initFansDynamic();
				}else{
					this.$apis.fansMatch().then(res => {
						if (res.code == 200) {
							if (res.data) {
								this.isFlourEmpty01 = true;
					
								this.userObjs = res.data;
								// flourUser
								this.$store.commit('updataflourUser', this.userObjs)
								console.log("this.userObjs===>", this.userObjs)
								this.flowLists = [];
								console.log('this.flowLists====>', this.flowLists);
								// debugger
								this.loadStatux = 'Loading'
								this.initFansDynamic();
								this.fanslabelList();
							} else {
								// debugger
								this.isFlourEmpty01 = false;
								this.loadStatux = "empty"
							}
					
						}
					})
					
				}
		

			
			},
			// 获取粉丝标签列表
			fanslabelList() {
				this.$apis.fansLabelList(
					this.userObjs.userId
				).then(res => {
					if (res.code == 200) {
						if (res.data.length != 0) {
							this.labelLists = this.initPro(res.data);
						} else {
							this.labelLists = []
						}
					}
				});
			},
			goPageS() {
				this.initOnShow().then(ress => {
					if (this.isShow == 2) {
						uni.navigateTo({
							// url: "../probeShop/releaseDynamics/releaseDynamics"
							url: "../probeShop/newReleaseDynamics/newReleaseDynamics"
						})
					}
				})

			},
			// 标签格式数据
			initPro(data) {
				// debugger
				let lArrNum = 0;
				let labeMyArr = [];
				let lArr = [];
				let labelArr = [];
				let nextArr = [];
				let Length = 19;
				let newlArr = ''
				labeMyArr = JSON.parse(JSON.stringify(data));
			
				// // 扁平化自己的标签
				// data.forEach((item, index) => {
				// 	// console.log(item)
				// 	item.labelList.forEach((newItem, newIndex) => {
				// 		if (newItem.userLabelId != 0) {
				// 			labeMyArr.push(newItem);
				// 		}
				// 	})
				// })
				console.log('labeMyArr---->', labeMyArr)
			
				// 初加工标签列表
				labeMyArr.forEach((item, index) => {
					
					lArr.push(item.label)
					newlArr = lArr.join('').split('');
					
					
					let len = 0;
					newlArr.forEach((newItem,newIndex)=>{
						// 标签标注化字符 汉字占2个字符 除汉字外的字符串占1个字符
						let isTest = /^[\u4e00-\u9fa5]+$/;
						if (isTest.test(newItem)) {
							len = len + 2;
						} else {
							len++;
						}
					});
					
					console.log('每个标签标注化====>',item.label,len);
					// 判断该列是否符合标准长度
					if (len > Length) {
						let nextArr01 = lArr.pop();
						nextArr = JSON.parse(JSON.stringify(lArr));
						lArr = [];
						labelArr.push({
							liNum: 0,
							lis: nextArr
						});
						console.log('超出的单个标签 重新组一行----->', nextArr01)
						lArr.push(nextArr01);
						
						if(index == labeMyArr.length-1){
							labelArr.push({
								liNum: 0,
								lis: lArr
							});
						}
						// debugger
					
					}else{
						
						if(index == labeMyArr.length-1){
							nextArr = JSON.parse(JSON.stringify(lArr));
							
							console.log('满足标准行的长度 index------>',index,labeMyArr.length-1,nextArr)
							labelArr.push({
								liNum: 0,
								lis: nextArr
							});
						}
					}				
				});
				
				
				
			    // 每行字体的设置处理
				let maxSum = labelArr.length % 2 == 0 ? (labelArr.length / 2 + 1) : (labelArr.length + 1) / 2;
				// let newLists = [];
				labelArr.forEach((item, index) => {
					let newIndex = index + 1;
					if (maxSum == newIndex) {
						item.liNum = 0;
					} else if (newIndex > maxSum) {
						item.liNum = 2 * (newIndex - maxSum);
					} else if (newIndex < maxSum) {
						item.liNum = 2 * (maxSum - newIndex) - 1;
					}
				})
				let newLabelArr = JSON.parse(JSON.stringify(labelArr))
				console.log('最后生成的标签列表------>', newLabelArr);
				// console.log('一共有多少条标签---->', lArrNum)
				return newLabelArr;
			
			},
			// 下一个
			next() {
				this.dynamicNum = 1;

				this.initOnShow().then(ress => {
					if (this.isShow == 2) {
						this.initFans(false)
					}
				})
			},
			// 关注按钮
			userFollow() {

				uni.requestSubscribeMessage({
					tmplIds: ['yzeIVWnmxfVOiswyRy127nj8gghks_4J4vkGNBcsA2E'],
					success: ress => {
						console.log("订阅成功", ress)
					},
					complete: c => {
						this.dynamicNum = 1;

						this.initOnShow().then(ress => {
							if (this.isShow == 2) {
								this.$apis.userFollow(this.userObjs.userId).then(res => {
									console.log('userFollow====>', res)
									if (res.code == 200) {
										// "data": "10" //关注状态 00未关注 10=已关注 01=被关注 11=相互关注
										// console.log('initFansDynamic===>', res)
										if (res.data == "11") {
											this.isPuper = true;
										} else {
											uni.showToast({
												title: res.data == "00" ? "关注已取消" : res
													.data == "10" ? "已关注" : res.data ==
													"01" ?
													"关注已取消" : "",
												// icon : 'error',
												duration: 1000
											})
										}

										// setTimeout(() => {
										this.initFans(false);
										// }, 500)


									}
								})

							}
						})
					}
				})
			},
			// 请求用户动态数据列表
			initFansDynamic() {
				// /amianfrontend/dynamic/list/{userId}
				// debugger;
				let req = {};
				req.pageNum = this.dynamicNum;
				req.pageSize = this.pageSize;

				this.$apis.dynamicListId(
					this.userObjs.userId,
					req
				).then(res => {
					if (res.code == 200) {
						// debugger
						if (res.rows.length != 0) {
                            let flowListsPush = [];
							let newFlowLists = JSON.parse(JSON.stringify(this.flowLists));
							
							res.rows.forEach(item => {
								flowListsPush.push({
									page: '/pages/flour/flourdetails/flourdetails',
									image: item.imageList[0],
									imageList: item.imageList,
									activityId: item.activityId,
									dynamicId: item.dynamicId,
									idx: item.dynamicId
									// name: item.
								})
							})
							newFlowLists = [...newFlowLists,...flowListsPush];
							newFlowLists = this.deWeight(newFlowLists);
							this.flowLists = JSON.parse(JSON.stringify(newFlowLists));
							console.log("this.flowLists请求后的", this.flowLists);
							this.loadStatux = "";
							if (res.rows.length < this.pageSize) {
								// debugger
								this.loadStatux = 'moduleNomore';
								this.newStatus = this.loadStatux
							}
						} else {
							this.isDynamic = false;
							this.isTrue = false;
							this.loadStatux = 'moduleNomore';
							this.newStatus = this.loadStatux
							if (this.dynamicNum == 1) {
								// debugger
								this.loadStatux = 'empty';
								
								this.newStatus = this.loadStatux
							}

						}



					}
				})
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				this.loadStatux = "Loading"
				let dx = e.detail.dx;
				if (dx == 0) {
					
					this.loadStatux = this.newStatus;
				}
				this.$refs.myTab.$refs.uTabs.setDx(dx);


			},
			// tabs通知swiper切换
			tabsChange(index) {
				// debuggermy

				this.swiperCurrent = index;
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {

				let current = e.detail.current;

				this.$refs.myTab.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			ffIsPopup(data) {
				// debugger
				this.popObj = data;
				// debugger
				this.isPopup = true;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

				// debugger
				if (this.isTrue && this.swiperCurrent == 1) {
					this.loadStatux = 'Loading';
					// 数据加载
					this.pageNum++;
					// setTimeout(() => {
					this.addRandomData();

					// }, 1000)
				} else if (this.isTrue && this.swiperCurrent == 0) {
					this.loadStatux = 'Loading';
					// 数据加载
					this.dynamicNum++;
					// setTimeout(() => {
					this.initFansDynamic();

					// }, 1000)



				}
			},
			ffChacha() {
				this.isPopup = false;
			},
			goMyDynamic() {
				uni.navigateTo({
					url: "myDynamic/myDynamic"
				})
			},
			// 请求广场的数据
			addRandomData() {
				// debugger

				let req = {};
				let arr = [];
				req.pageSize = this.pageSize;
				req.pageNum = this.pageNum;

				this.$apis.dynamicSquareList(
					req
				).then(res => {
					if (res.code == 200) {
						// debugger
						if (res.rows.length != 0) {
							this.isDynamic = true;
							let newsquareLists = [];
							let squareListsCon = JSON.parse(JSON.stringify(this.squareLists));
							res.rows.forEach(item => {
								newsquareLists.push({
									page: '/pages/flour/flourdetails/flourdetails',
									image: item.imageList[0],
									imageList: item.imageList,
									activityId: item.activityId,
									dynamicId: item.dynamicId,
									idx: item.dynamicId
									// name: item.
								})
							})
							squareListsCon = [...squareListsCon, ...newsquareLists];
							squareListsCon = this.deWeight(squareListsCon);
							this.squareLists = JSON.parse(JSON.stringify(squareListsCon));
							this.$forceUpdate();
							console.log("this.squareLists====>", this.squareLists)
							this.loadStatux = "";
							
							this.newStatus = this.loadStatux
							if (res.rows.length < this.pageSize) {
								// debugger
								this.loadStatux = 'moduleNomore';
								this.newStatus = this.loadStatux
							}
						} else {
							this.isDynamic = false;
							this.isTrue = false;
							this.loadStatux = 'moduleNomore';
							this.newStatus = this.loadStatux
							if (this.pageNum == 1) {
								this.loadStatux = 'empty';
								this.newStatus = this.loadStatux
							}
						}
						// setTimeout(() => {
						// 	this.isCircle = false;
						// }, 1000)
						console.log("this.squareLists====>", this.squareLists, req.pageNum)
					}

				});

			},
		}

	}
</script>

<style lang="scss">
	.flour {
		height: 100vh;

		.circle {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.slot-wrap {
			font-size: 56rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: LEFT;
			color: #040000;
			margin-left: 40rpx;
			transform: translateY(-10rpx);
		}



		.HomeWrap {}

		.marginA {
			margin: 0rpx 40rpx 0px;
		}

		// .u-tabs-scroll-box {
		// 	font-size: 45rpx;
		// 	font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		// 	// font-weight: 700;
		// 	margin-left: 25rpx;
		// }

		.u-tabs-item {
			// transition: all 1s; 
			// width: 145rpx !important;
			font-weight: 700 !important;
			letter-spacing: 2rpx;
		}

		// .u-scroll-bar {
		// 	background-color: #F10200 !important;
		// }

		.swiperBox {
			position: fixed;
			width: 100%;
			// height: 80vh;
			// background-color: #360;
			// margin-top: 87rpx;
			// !important;
		}

		.swiper-item {
			// margin: 20rpx 40rpx 0px;
			overflow: scroll;
		}


		.my_label {
			margin-top: 35rpx;
			font-weight: 800;
			padding: 0 40rpx;
		}



		.my_label span {
			display: inline-block;
			width: 22rpx;
			height: 22rpx;
			border-radius: 50%;
			background-color: #000000;
			margin: 0 10rpx;

		}

		// font-family: Source Han Sans CN, Source Han Sans CN-Bold;
		// font-weight: 700;
		// text-align: LEFT;
		// color: #2d3034;
		.my_label_ {
			margin-top: 4rpx;
			display: flex;
			align-items: center;
		}

		.my_label1 {
			font-size: 44rpx;
		}

		.my_label2 {
			font-size: 62rpx;
		}

		.my_label3 {
			font-size: 72rpx;
		}

		.my_label4 {
			font-size: 54rpx;
		}

		.my_label5 {
			font-size: 36rpx;
		}

		.privilege {
			width: 670rpx;
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			position: relative;
		}

		.privilege_image {
			display: inline-block;
			vertical-align: top;
		}

		.privilege_image image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 22rpx;
		}

		.privilege_title {
			display: inline-block;
			color: #2d3034;
			font-size: 34rpx;
			font-weight: 700;
			vertical-align: top;
		}

		.privilege_image_ {
			display: inline-block;
			vertical-align: top;
			position: absolute;
			top: 5rpx;
			right: 0;
		}

		.privilege_image_ image {
			width: 32rpx;
			height: 32rpx;
		}

		.label {
			// margin-top: 60rpx;
			display: flex;
			align-items: center;
		}

		.privilege_label {
			display: inline-block;
			width: 8rpx;
			height: 34rpx;
			background: #f10200;
			margin-right: 14rpx;
		}

		.falls {
			// width: ;

		}

		// .pduan {

		// 	bottom: 110rpx;
		// 	width: 100%;
		// 	display: flex;
		// 	justify-content: space-around;
		// }

		.boxs {
			text-align: center;
		}

		.pduanBox {
			position: fixed;
			width: 144rpx;
			height: 144rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
			font-size: 13px;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			bottom: 170rpx;
		}

		.dynamic {

			right: 48rpx;
			bottom: 170rpx;
			z-index: 11;
			position: fixed;
			width: 144rpx;
			height: 144rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;

			font-size: 13px;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			bottom: 170rpx;
			background: #f10200;
			border-radius: 50%;
			box-shadow: 0px 5px 15px -5px #f10200;


			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.Box_left {
			background: #000000;
			color: #F10200;
			left: 50rpx;
		}

		.Box_Right {
			background: #F10200;
			color: #000000;
			right: 50rpx;
		}

		.tap_swiper {
			position: fixed;
			width: 100%;
			z-index: 9;

		}

		.pduanBoxFb {
			width: 144rpx;
			height: 144rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
			font-size: 13px;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			background: #F10200;
			position: fixed;
			bottom: 50rpx;
			right: 20rpx;

			.BoxFb {
				font-weight: bold !important;
			}
		}

		.u-icon__icon {
			// margin: 0 auto;
			font-weight: bold !important;
		}

		.demo-warter {
			margin-bottom: 4rpx;
			position: relative;
		}

		.warter-left {
			margin-right: 2rpx !important;
		}

		.warter-right {
			margin-left: 2rpx !important;
		}

		.conBox {
			text-align: center;
			padding-top: 60rpx;
		}

		.conBoxTitle {
			font-size: 50rpx;
			font-weight: 700;
		}

		.conBoxText {
			margin-top: 20rpx;
			font-size: 34rpx;
			text-align: left;
			line-height: 48rpx;
			/* text-indent: 15rpx; */
			height: 312rpx;
			overflow-y: scroll;
			word-wrap: break-word;
			word-break: break-all;
			display: flex;
		}

		.popBox {
			width: 620rpx;
			height: 774rpx;
			background-color: #fff;
			position: relative;
			padding: 20rpx 40rpx;
			box-sizing: border-box;
		}

		.popCha {
			z-index: 99;
			width: 80rpx;
			position: absolute;
			top: 15rpx;
			right: 15rpx;
		}

		.conBoxImg {
			width: 250rpx;
		}

		.dot {
			filter: grayscale(100%);
			filter: gray;
		}


		.puperBox {
			width: 550rpx;
			height: 514rpx;
			background: #ffffff;
			border-radius: 12rpx;
			box-shadow: 0px 2rpx 0px 0px #ededed inset;
			text-align: center;
		}

		.puperBoxImg {
			width: 160rpx;
			height: 160rpx;
			margin: 60rpx 0px 0px;
		}

		.puperBoxTitle {
			font-size: 18px;
			font-family: Source Han Sans SC, Source Han Sans SC-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #2d3034;
			margin: 28rpx 0 15rpx;
		}

		.puperBoxText {
			font-size: 30rpx;
			font-family: Source Han Sans SC, Source Han Sans SC-Regular;
			font-weight: 500;
			text-align: CENTER;
			color: #606266;
		}

		.puperBoxButs {
			font-size: 34rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Bold;
			font-weight: 700;
			text-align: CENTER;
			color: #606266;
			border-top: 2rpx solid #e3e4e4;
			height: 100rpx;
			line-height: 100rpx;
			/* background: #360; */
			position: absolute;
			width: 100%;
			bottom: 0px;
		}
	}

	.circle {
		margin-top: 40rpx;
		position: relative;
	}

	.circle_ {
		position: absolute;
		left: 50%;
		transform: translateX(-100%);
	}
</style>
